<template>
  <div class="txt">
<pre>
1. 下载身份验证器
身份验证器是目前广泛使用的一种双因子认证方式，可选的身份验证器有：
Tencent Authenticator 腾讯身份验证器
Microsoft Authenticator
1Password
请先在您的手机应用商店上下载上述身份验证器当中的任意一种。
</pre>

    <div>
      2. 绑定身份验证器<br/>
      <div>
        <el-button @click="open_click">重新生成身份验证器</el-button>
        <el-button @click="close_click">关闭生成身份验证器</el-button>
      </div>
      在手机上使用您上一个步骤中下载的身份验证器扫描下面的二维码，或者输入
      <el-input v-model="$data.key"/>
      <div
          style="display:flex;flex-direction:column;align-items:center;width:280px;color:gray;border:solid 2px orange;height:290px;justify-content:center;overflow:hidden;margin:10px 0;">
        <img :src="$data.img" width="200px" height="200px" style="zoom: 1.7;margin: -20px -30px -30px;"/>
        开发平台身份验证码
      </div>
    </div>

    <div>
      3. 输入验证码 <br/>
      扫描二维码之后，您手机上的身份验证器将会显示一个六位数字的验证码，请在下面输入该验证码：
      <el-input placeholder="请输入6位验证码" v-model="$data.code"/>
    </div>


    <div>
      <el-button>取消</el-button>
      <el-button @click="bind_click">确定</el-button>
    </div>

  </div>

</template>
<script setup>
const $data = reactive({key: "", img: "", code: ""});

const open_click = () => {
  jv.$http.post("/api/auth/secret-key").then(res => {
    jv.info("开启成功")
    load();
  })
}

const close_click = () => {
  jv.$http.post("/api/auth/close").then(res => {
    jv.info("已关闭")
    load();
  })
}

const load = () => {
  jv.$http.get("/api/auth/qr-code").then(res => {
    var json = res.data.data;
    $data.img = json.img;
    $data.key = json.key;
  })
}
const bind_click = () => {
  jv.$http.post("/api/auth/verify/" + $data.code).then(res => {
    if (res.data.data) {
      jv.info("验证成功")
    } else {
      jv.info("验证失败")
    }
  })
}


onMounted(function () {
  load();
})


</script>
<style scoped lang="scss">
.txt > * {
  margin: 10px;
  line-height: 1.8;
}
</style>